<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回按钮功能
const goBack = () => {
  router.back()
}

// 营养数据
const nutritionData = ref({
  dailyIntake: {
    calories: 1800,
    caloriesGoal: 2000,
    protein: 75,
    proteinGoal: 80,
    carbs: 220,
    carbsGoal: 250,
    fat: 55,
    fatGoal: 65,
    fiber: 20,
    fiberGoal: 25
  },
  todayMeals: [
    {
      id: 1,
      type: '早餐',
      time: '08:30',
      foods: [
        { name: '全麦面包', quantity: '2片', calories: 160, protein: 6, carbs: 24, fat: 4 },
        { name: '鸡蛋', quantity: '1个', calories: 78, protein: 6, carbs: 0, fat: 6 },
        { name: '牛奶', quantity: '200ml', calories: 120, protein: 8, carbs: 10, fat: 4 }
      ]
    },
    {
      id: 2,
      type: '午餐',
      time: '12:30',
      foods: [
        { name: '糙米饭', quantity: '1碗', calories: 160, protein: 4, carbs: 36, fat: 0 },
        { name: '鸡胸肉', quantity: '100g', calories: 165, protein: 31, carbs: 0, fat: 3 },
        { name: '西兰花', quantity: '150g', calories: 45, protein: 3, carbs: 7, fat: 1 },
        { name: '豆腐汤', quantity: '1碗', calories: 80, protein: 6, carbs: 4, fat: 4 }
      ]
    },
    {
      id: 3,
      type: '下午茶',
      time: '15:00',
      foods: [
        { name: '苹果', quantity: '1个', calories: 95, protein: 0, carbs: 25, fat: 0 },
        { name: '杏仁', quantity: '10颗', calories: 70, protein: 3, carbs: 2, fat: 6 }
      ]
    },
    {
      id: 4,
      type: '晚餐',
      time: '19:00',
      foods: [
        { name: '清蒸鱼', quantity: '150g', calories: 180, protein: 25, carbs: 0, fat: 8 },
        { name: '荞麦面', quantity: '100g', calories: 120, protein: 4, carbs: 24, fat: 1 },
        { name: '凉拌黄瓜', quantity: '100g', calories: 16, protein: 0, carbs: 4, fat: 0 }
      ]
    }
  ],
  nutritionTips: [
    '每天保证摄入足够的蛋白质，建议占总热量的15-20%',
    '多吃全谷物、蔬菜和水果，增加膳食纤维摄入',
    '选择健康脂肪，如坚果、橄榄油和深海鱼类',
    '控制添加糖和盐的摄入量',
    '保持充足的水分，每天至少喝8杯水',
    '饮食多样化，避免单一食物过量摄入'
  ]
})

// 计算营养摄入百分比
const getNutritionPercentage = (current, goal) => {
  return Math.min((current / goal) * 100, 100)
}
</script>

<template>
  <div class="nutrition-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      ← 返回
    </button>

    <!-- 页面标题 -->
    <h1 class="page-title">营养摄入</h1>

    <!-- 今日营养概览卡片 -->
    <div class="nutrition-card">
      <h2 class="card-title">今日营养概览</h2>
      <div class="nutrition-progress">
        <div class="nutrition-item">
          <div class="nutrition-header">
            <span class="nutrition-name">卡路里</span>
            <span class="nutrition-values">{{ nutritionData.dailyIntake.calories }}/{{ nutritionData.dailyIntake.caloriesGoal }} kcal</span>
          </div>
          <div class="nutrition-bar">
            <div 
              class="nutrition-fill calories" 
              :style="{ width: getNutritionPercentage(nutritionData.dailyIntake.calories, nutritionData.dailyIntake.caloriesGoal) + '%' }"
            ></div>
          </div>
        </div>
        
        <div class="nutrition-item">
          <div class="nutrition-header">
            <span class="nutrition-name">蛋白质</span>
            <span class="nutrition-values">{{ nutritionData.dailyIntake.protein }}/{{ nutritionData.dailyIntake.proteinGoal }} g</span>
          </div>
          <div class="nutrition-bar">
            <div 
              class="nutrition-fill protein" 
              :style="{ width: getNutritionPercentage(nutritionData.dailyIntake.protein, nutritionData.dailyIntake.proteinGoal) + '%' }"
            ></div>
          </div>
        </div>
        
        <div class="nutrition-item">
          <div class="nutrition-header">
            <span class="nutrition-name">碳水化合物</span>
            <span class="nutrition-values">{{ nutritionData.dailyIntake.carbs }}/{{ nutritionData.dailyIntake.carbsGoal }} g</span>
          </div>
          <div class="nutrition-bar">
            <div 
              class="nutrition-fill carbs" 
              :style="{ width: getNutritionPercentage(nutritionData.dailyIntake.carbs, nutritionData.dailyIntake.carbsGoal) + '%' }"
            ></div>
          </div>
        </div>
        
        <div class="nutrition-item">
          <div class="nutrition-header">
            <span class="nutrition-name">脂肪</span>
            <span class="nutrition-values">{{ nutritionData.dailyIntake.fat }}/{{ nutritionData.dailyIntake.fatGoal }} g</span>
          </div>
          <div class="nutrition-bar">
            <div 
              class="nutrition-fill fat" 
              :style="{ width: getNutritionPercentage(nutritionData.dailyIntake.fat, nutritionData.dailyIntake.fatGoal) + '%' }"
            ></div>
          </div>
        </div>
        
        <div class="nutrition-item">
          <div class="nutrition-header">
            <span class="nutrition-name">膳食纤维</span>
            <span class="nutrition-values">{{ nutritionData.dailyIntake.fiber }}/{{ nutritionData.dailyIntake.fiberGoal }} g</span>
          </div>
          <div class="nutrition-bar">
            <div 
              class="nutrition-fill fiber" 
              :style="{ width: getNutritionPercentage(nutritionData.dailyIntake.fiber, nutritionData.dailyIntake.fiberGoal) + '%' }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 今日膳食记录卡片 -->
    <div class="nutrition-card">
      <h2 class="card-title">今日膳食记录</h2>
      <div class="meals-container">
        <div 
          v-for="meal in nutritionData.todayMeals" 
          :key="meal.id"
          class="meal-card"
        >
          <div class="meal-header">
            <h3 class="meal-type">{{ meal.type }}</h3>
            <span class="meal-time">{{ meal.time }}</span>
          </div>
          <div class="meal-foods">
            <div 
              v-for="food in meal.foods" 
              :key="food.name"
              class="food-item"
            >
              <div class="food-info">
                <span class="food-name">{{ food.name }}</span>
                <span class="food-quantity">{{ food.quantity }}</span>
              </div>
              <div class="food-nutrition">
                <span>{{ food.calories }} kcal</span>
                <span>P: {{ food.protein }}g</span>
                <span>C: {{ food.carbs }}g</span>
                <span>F: {{ food.fat }}g</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 营养建议卡片 -->
    <div class="nutrition-card">
      <h2 class="card-title">营养建议</h2>
      <div class="nutrition-tips">
        <ul>
          <li v-for="(tip, index) in nutritionData.nutritionTips" :key="index">
            {{ tip }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 健康饮食金字塔 -->
    <div class="nutrition-card">
      <h2 class="card-title">健康饮食比例</h2>
      <div class="food-pyramid">
        <div class="pyramid-level level-1">
          <div class="level-label">谷物类<br>40-50%</div>
        </div>
        <div class="pyramid-level level-2">
          <div class="level-label">蔬菜类<br>25-30%</div>
        </div>
        <div class="pyramid-level level-3">
          <div class="level-label">蛋白质<br>15-20%</div>
        </div>
        <div class="pyramid-level level-4">
          <div class="level-label">油脂类<br>5-10%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.nutrition-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.back-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  text-decoration: underline;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin: 20px 0 30px;
  font-size: 28px;
}

.nutrition-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-title {
  color: #34495e;
  margin-bottom: 20px;
  font-size: 20px;
  border-bottom: 2px solid #e1e8ed;
  padding-bottom: 10px;
}

.nutrition-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nutrition-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nutrition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nutrition-name {
  font-weight: 500;
  color: #2c3e50;
}

.nutrition-values {
  font-size: 14px;
  color: #6c757d;
}

.nutrition-bar {
  width: 100%;
  height: 12px;
  background-color: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

.nutrition-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.nutrition-fill.calories {
  background-color: #ff6b6b;
}

.nutrition-fill.protein {
  background-color: #4ecdc4;
}

.nutrition-fill.carbs {
  background-color: #45b7d1;
}

.nutrition-fill.fat {
  background-color: #f9ca24;
}

.nutrition-fill.fiber {
  background-color: #6ab04c;
}

.meals-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.meal-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}

.meal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.meal-type {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0;
}

.meal-time {
  font-size: 14px;
  color: #6c757d;
}

.meal-foods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.food-item {
  padding: 10px;
  background-color: white;
  border-radius: 6px;
  border-left: 3px solid #4ecdc4;
}

.food-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.food-name {
  font-weight: 500;
  color: #2c3e50;
}

.food-quantity {
  font-size: 14px;
  color: #6c757d;
}

.food-nutrition {
  display: flex;
  gap: 15px;
  font-size: 13px;
  color: #6c757d;
}

.nutrition-tips ul {
  padding-left: 20px;
  line-height: 1.8;
}

.nutrition-tips li {
  color: #2c3e50;
  margin-bottom: 10px;
}

.nutrition-tips li:last-child {
  margin-bottom: 0;
}

.food-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.pyramid-level {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
}

.level-1 {
  width: 80%;
  height: 80px;
  background-color: #6ab04c;
  border-radius: 4px 4px 0 0;
}

.level-2 {
  width: 65%;
  height: 60px;
  background-color: #f9ca24;
}

.level-3 {
  width: 50%;
  height: 40px;
  background-color: #eb4d4b;
}

.level-4 {
  width: 35%;
  height: 20px;
  background-color: #70a1ff;
  border-radius: 0 0 4px 4px;
}

.level-label {
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nutrition-container {
    padding: 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .food-nutrition {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .pyramid-level {
    font-size: 12px;
  }
  
  .level-1 {
    height: 60px;
  }
  
  .level-2 {
    height: 45px;
  }
  
  .level-3 {
    height: 30px;
  }
  
  .level-4 {
    height: 15px;
  }
}
</style>